<template>
  <div class="company-perm">
    <div class="company-perm-title">
      数据权限
    </div>
    <div class="company-perm-body"> 
      <el-form-item prop="companyPerms" :rules="rule">
        <el-radio-group :model-value="props.modelValue" @update:model-value="onChange">
          <el-radio v-for="(item) in companyList" :key="item.val" :value="item.val">{{ item.name }}</el-radio>
        </el-radio-group>
      </el-form-item>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { getAllData } from '../api'
import { ElRadio, ElRadioGroup, ElFormItem } from 'element-plus'

interface Props {
  modelValue: string;
  data: object;
}
const props = withDefaults(defineProps<Props>(), {
  modelValue: () => '',
  data: () => ({})
})

interface Emits {
  'update:model-value': [string[]]
}
const emit = defineEmits<Readonly<Emits>>()

const rule = { required: true, message: '请选择数据权限', trigger: 'blur' }

const companyList = ref([])
onMounted(async () => {
  companyList.value = await getAllData() || []
})

const onChange = val => {
  emit('update:model-value', val)
}
</script>

<style scoped lang="scss">
.company-perm {
  &-title {
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 13px;
    color: #333333;
  }
}
</style>
